<template>
  <div>
    <span style="color: #0044f0">{{ text }}</span>
    <el-dropdown @command='handleCommand' trigger="click">
      <span class="el-dropdown-link">
        {{ title }}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item :command='item.id' v-for="(item) in menuList" :key="item.id">{{
            item.name
          }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>

</template>

<script>
export default {
  name: "SelectProject",
  data() {
    return {
      title: "选择项目",
      menuList: [],
      text: "请选择项目："
    }
  },
  methods: {
    getDropdownList() {
      this.api({
        url: `/getProjectDropdown/${this.$store.getters.userId}`,
        method: "get"
      }).then(resp => {
        if (resp.list.length > 0) {
          this.menuList = resp.list
          const item = window.sessionStorage.getItem("projectId");
          if (item) {
            for (const dataKey of this.menuList) {
              if (dataKey["id"] === item) {
                this.title = dataKey["name"]
              }
            }
          } else {
            for (const dataKey of this.menuList) {
              if (dataKey["id"] === resp.list[0]) {
                this.title = dataKey["name"]
              }
            }
          }
        } else {
          this.$message.info("WEB测试相关的功能，需要先创建项目！")
        }
      });
    },
    handleCommand(data) {
      window.sessionStorage.setItem("projectId", data)
      this.text = "已选择项目："
      location.reload()
    }
  },
  mounted() {
    this.getDropdownList()
  },
  created() {

  }
}
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #303133;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: color .2s cubic-bezier(.645, .045, .355, 1);
}

.el-icon-arrow-down {
  font-size: 14px;
}
</style>
